<template>
    <div>

     <van-search
       v-model="value"
       show-action
       label="上海:"
       placeholder="请输入搜索关键词"
       @search="onSearch"
       class="search"
>      <template #action>
       <van-icon name="location" :style="{fontSize:'25px'}" @click="click1" />
       </template>
       </van-search>

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
   <van-dropdown-item v-model="value3" :options="option3" />
    <van-dropdown-item v-model="value4" :options="option4" />
</van-dropdown-menu>


   <!-- <van-grid :gutter="10" :column-num="1">
  <van-grid-item  v-for="item in list" :key="item.id" :text="item.desc" />
   </van-grid> -->

    <ul>
        <li v-for="item in list" :key="item.id" @click="goxiangqing(item.houseCode)">
            <div>
                <!-- <img :src="item.houseImg" alt=""> -->
                <img src="../assets/1.png" alt="">
            </div>
            <div>
             <p>{{item.title}}</p>
             <p>{{item.desc}}</p>
             <p>{{item.tags[0]}}</p>
             <p>{{item.price}}元/月</p>
            </div>
            
        </li>
    </ul>
    



    </div>
</template>

<script>
import axios from 'axios'
export default {
    name: 'VuecliDemo1',

    data() {
        return {
         list:[],
          value: '',
          label:'',

      value1: 0,
      value2: 'a',
       value3: 0,
      value4: 'a',
      option1: [
        { text: '区域', value: 0 },
        { text: '上海', value: 1 },
        { text: '北京', value: 2 },
      ],
      option2: [
        { text: '方式', value: 'a' },
        { text: '整租', value: 'b' },
        { text: '合租', value: 'c' },
        { text: '不限', value: 'dd' },
      ],
      option3: [
        { text: '租金', value: 0 },
        { text: '0-5000', value: 'b' },
        { text: '5000-10000', value: 'c' },
         { text: '10000以上', value: 'd' },
      ],
      option4: [
        { text: '筛选', value: 'a' },
        { text: '一室', value: 'b' },
        { text: '两室', value: 'c' },
      ],



        };
    },

  created(){
  this.getlist()
  },

    mounted() {
        
    },

    methods: {
         onSearch(){
        alert('1')
    },
    click1(){
        alert('1')
    },

    goxiangqing(houseCode){
        this.$router.push({
            path:`/xiangqing?id=${houseCode}`
        })
    },
   
    async getlist(){
   try{
      const res = await axios({
      method:'get',
      url:'http://liufusong.top:8080/houses?AREA%7Cdbf46d32-7e76-1196' 
  })
      console.log(res.data.body.list);
      this.list = res.data.body.list
  }
   catch(e){
      console.log(e);
  }
}

    },




};
</script>

<style lang="less" scoped>
.search{
    background-color: #21b97a;
}

ul {
       display: flex;
       flex-wrap: wrap;
       justify-content: space-evenly; 
    li {
    list-style: none;
    width: 99%;
    border-bottom: 1px solid #e5e5e5;
      display: flex;
       
       img{
            width: 100px;
            height: 90px;
            object-fit: cover;
            margin-right: 10px;
        }
        p{
            line-height: 11px;
        }
}
}

</style>